<template>
	<view>
		<view :class="spread_func? 'wei_chats':'wei_chat'">
			<view class="fu" v-if="spread_func" @click="publish">
				<u-icon name="edit-pen" size="40rpx" color="#ff6768"></u-icon>
				<span class="text">发表说说</span>
				<u-popup v-model="show" mode="center" width="95%" height="auto" border-radius="14">
					<view class="bg">
						<view class="forms">
							<u-form :model="form" ref="uForm">
								<u-form-item label="昵称" left-icon="man-add" label-width="200rpx" prop="stuname">
									<u-input v-model="form.name" />
								</u-form-item>
								<u-form-item label="发表内容" left-icon="edit-pen" label-width="200rpx" prop="edit">
									<u-input v-model="form.edit" placeholder="输入需要发表的内容" type="textarea"
										:auto-height="true" />
								</u-form-item>
								<u-form-item label="标签" left-icon="tags">
									<u-checkbox-group>
										<u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList"
											:key="index" :name="item.name">
											{{ item.name }}
										</u-checkbox>
									</u-checkbox-group>
								</u-form-item>
							</u-form>
							<u-button @click="submit" size='medium'>提交</u-button>
						</view>
					</view>
				</u-popup>
			</view>
			<view class="fu" v-if="spread_func" @click="administer">
				<u-icon name="account" size="40rpx" color="#ff6768"></u-icon>
				<span class="text">管理员</span>
			</view>
			<view class="fu" v-if="spread_func" @click="queryMy">
				<u-icon name="tags" size="40rpx" color="#ff6768"></u-icon>
				<span class="text">兴趣标签</span>
			</view>
			<view class="fu" @click="spread">
				<u-icon name="grid" size="70rpx" color="#ff6768"></u-icon>
				<span>功能</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'function_list',
		data() {
			return {
				form: {
					name: '匿名',
					edit: '',
				},
				spread_func: false,
				show: false,
				rules: {
					name: [{
						required: false,
					}],
					edit: [{
						required: true,
						message: '还未输入要发表的内容',
					}],
				},
				checkboxList: [{
						name: '随笔',
						checked: false,
					},
					{
						name: '吐槽',
						checked: false,
					},
					{
						name: '求助',
						checked: false,
					},
					{
						name: '表白',
						checked: false,
					},
					{
						name: '询问',
						checked: false,
					}
				],
			}
		},
		methods: {
			spread() {
				if (this.spread_func == false) {
					this.spread_func = true
				} else if (this.spread_func == true) {
					this.spread_func = false
				}
			},
			publish() {
				// 发表说说接口
				this.show = true
			},
			submit() {
				let that = this
				if (this.$rules(this.form, this.rules)) {
					uni.showLoading({
						title: '提交中...',
						success: res => {
							that.show = false
						}
					})
				}
			},
			administer() {
				// 管理员接口
			},
			queryMy() {
				// 查询我的说说接口
			}
		}
	}
</script>

<style lang="less">
	.wei_chat {
		position: fixed;
		margin-top: 35vh;
		margin-left: 660rpx;

		.fu {
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;

			span {
				font-size: 28rpx;
			}
		}
	}

	.wei_chats {
		position: fixed;
		margin-top: 35vh;
		margin-left: 250rpx;
		width: 500rpx;
		border: 1px lightgray solid;
		border-radius: 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		overflow: hidden;
		box-shadow: 1px 1px 1px 1px lightgray;
		height: 125rpx;
		z-index: 999;

		.fu {
			margin-left: 20rpx;
			display: flex;
			width: 110rpx;
			align-items: center;
			flex-direction: column;
			justify-content: center;

			.bg {
				width: 100%;
				height: 100%;
				background-image: linear-gradient(to bottom, #f1ac9d, #B9EDF8);

				.forms {
					margin-left: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
				}
			}

			span {
				font-size: 28rpx;
			}

			.text {
				margin-top: 10rpx;
				font-size: 23rpx;
			}
		}
	}
</style>
